<template>
  <div class="text">
    <div class="text-left">
      <c-form
        ref="formRef"
        label-width="100px"
        width="100%"
        :loading="loading"
        :model="formData"
        :rows="formRows"
        @submit="onSubmit"
        @reset="onReset"
      >
        <template #imagesStatusSlot> </template>
      </c-form>
    </div>
    <div class="text-center">
      <material-read @out-text="onOutText" @on-batch="onBatchText"></material-read>
    </div>
    <div class="text-right">
      <div class="is-title">当前已上传</div>
      <div class="preview-list">
        <div class="preview-list-item" v-for="(item, index) in previewList" :key="item.content">
          <div class="preview-list-content">
            {{ item.content }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="">
import { ref, unref, computed } from 'vue';

import { ElMessage } from 'element-plus';
import MaterialRead from '@/components/material-read/index.vue';

import { awit } from '@/utils/tools';

// hooks
import { useForm } from '@/hooks/useForm';
import { useFetch } from '@/hooks/useFetch/index.js';

import { listTextGroup, userListTextGroup, createText, pageListText, delText } from '@/apis/text';

// store modal
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

// user
import { useUserStore } from '@/pinia/modules/user.js';
const userStore = useUserStore();

// router
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

const emit = defineEmits(['refresh']);

const props = defineProps({
  // 0 普通用户 1 admin
  userType: {
    type: [String, Number],
    default: 0,
  },
});

// 分组列表
const {
  loading: groupLoading,
  data: groupData,
  queryData: queryListGroup,
} = useFetch({
  api: props.userType == 1 ? listTextGroup : userListTextGroup,

  params: {},
});

const { loading, formData, submitForm } = useForm({
  initParams: {
    content: '',
    group_id: '',
    text_sort: 0,
  },
});

const previewList = ref([]);

const formRows = ref([
  { formType: 'title', label: '基础设置' },
  {
    formType: 'select',
    prop: 'group_id',
    label: '文案分组:',
    optionList: computed(() => groupData.value.data),
    optionProps: { label: 'name', value: '_id' },
    loading: computed(() => groupLoading.value),
  },
  {
    formType: 'input',
    type: 'textarea',
    autosize: { minRows: 5, maxRows: 20 },
    prop: 'content',
    label: '文案内容:',
  },
  { formType: 'input-number', prop: 'text_sort', label: '分组权重:' },
]);

let elementList = [];

const onOutText = (text) => {
  if (formData.value.content) {
    formData.value.content += '\n';
  }
  elementList.push(text);
  formData.value.content += text;
};

const handleCreateText = async (status) => {
  let obj = {
    ...formData.value,
  };

  if (props.userType == 1) {
    obj['userid'] = -1;
  }

  const textRes = await createText(obj).catch((err) => err);
  if (textRes.code === 0) {
    if (!status) {
      ElMessage.success('上传成功');
    }
    previewList.value.push({ content: formData.value.content });
    formData.value.content = '';
  }
};

const formRef = ref(null);
const onSubmit = async (values, instance) => {
  console.log(formData.value, 'formData');

  instance.loading = true;
  await handleCreateText();
  instance.loading = false;
};

const onReset = () => {};

const onBatchText = async (list) => {
  if (formData.value.group_id === '') {
    ElMessage.error('请选择分组');
    return;
  }
  formData.value.content = '';
  for (const item of list) {
    if (item.status != 2) {
      await awit(300);
      formData.value.content = item.text;
      loading.value = true;
      item.status = 1;
      await handleCreateText(true);
      loading.value = false;
      item.status = 2;
    }
  }

  console.log(previewList.value, ' previewList.value');
};

const initData = () => {
  // console.log(route.query, 'route.query');

  const { group_id } = route.query;

  formData.value.group_id = group_id;
};

initData();
</script>

<style lang="scss" scoped>
.image-state {
  display: flex;
  align-items: center;
}

.image-state-item {
  margin-right: 12px;
}

.text {
  height: 100%;
  display: flex;
  overflow-x: auto;
}

.text-left {
  min-width: 460px;
  width: 100%;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  @include card-box;
}

.text-center {
  @include card-box;
  width: 375px;
  flex-shrink: 0;
  margin-left: 12px;
  // padding: 12px 0 16px;
  box-sizing: border-box;
  overflow: hidden;

  .is-title {
    margin-left: 12px;
  }
}

.text-right {
  width: 375px;
  flex-shrink: 0;
  overflow: auto;
  margin-left: 12px;
  padding: 12px 0;
  box-sizing: border-box;

  @include card-box;
  .is-title {
    margin-left: 12px;
  }
}

.preview-list {
  padding: 12px 16px;
  box-sizing: border-box;
}

.preview-list-item {
  padding: 12px 0;
  border-bottom: 1px dashed #e6e6e6;
}

.preview-list-content {
  white-space: pre-wrap;
  font-size: 12px;
}
</style>
